<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>评价列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar-nav {
			background: #86CAF9;
		}
		.mui-bar .mui-icon {
			color: #fff;
		}
		.mui-title {
			color: #fff;
		}
		.evaluate-ul {
			margin-top: 10px;
		}
		.evaluate-li {
			padding: 10px;
			border-bottom: 1px solid #D2D2D2;
		}
		.evaluate-user {
			display: flex;
			justify-content: space-between;
		}
		.user-score {
			display: flex;
			align-items: flex-start;
		}
		.user-head {
			width: 34px;
			height: 34px;
			border-radius: 50%;
		}
		.name-score {
			margin-left: 6px;
		}
		.name-score .name {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666;
		}
		.name-score .score {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #E6B406;
		}
		.evaluate-time {
			font-size: 12px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #999;
		}
		.evaluate-content {
			margin-top: 5px;
			margin-left: 40px;
			font-size: 12px;
			font-family:PingFang SC;
			font-weight:500;
			color: #666;
		}
		.dividing-line {
			margin-top: 5px;
			width: 100%;
			height: 15px;
			background: #efeff4;
		}
		.mui-segmented-control.mui-segmented-control-inverted {
			margin-top: 5px;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #86CAF9;
    		border-bottom: 2px solid #86CAF9;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
			color: #666;
		}
		/*上拉加载下拉刷新*/
		.mui-control-content {
			position: static;
		}
		.mui-scroll-wrapper {
			top: 109px;
		}
		.mui-bar~.mui-content .mui-fullscreen {
			top: 100px;
			height: auto;
		}
		.mui-pull-top-tips {
			position: absolute;
			top: -20px;
			left: 50%;
			margin-left: -25px;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			z-index: 1;
		}
		.mui-bar~.mui-pull-top-tips {
			top: 44px;
		}
		.mui-pull-top-wrapper {
			width: 42px;
			height: 42px;
			display: block;
			text-align: center;
			background-color: #efeff4;
			border: 1px solid #ddd;
			border-radius: 25px;
			background-clip: padding-box;
			box-shadow: 0 4px 10px #bbb;
			overflow: hidden;
		}
		.mui-pull-top-tips.mui-transitioning {
			-webkit-transition-duration: 200ms;
			transition-duration: 200ms;
		}
		.mui-pull-top-tips .mui-pull-loading {
			/*-webkit-backface-visibility: hidden;
			-webkit-transition-duration: 400ms;
			transition-duration: 400ms;*/
			
			margin: 0;
		}
		.mui-pull-top-wrapper .mui-icon,
		.mui-pull-top-wrapper .mui-spinner {
			margin-top: 7px;
		}
		.mui-pull-top-wrapper .mui-icon.mui-reverse {
			/*-webkit-transform: rotate(180deg) translateZ(0);*/
		}
		.mui-pull-bottom-tips {
			text-align: center;
			background-color: #efeff4;
			font-size: 15px;
			line-height: 40px;
			color: #777;
		}
		.mui-pull-top-canvas {
			overflow: hidden;
			background-color: #fafafa;
			border-radius: 40px;
			box-shadow: 0 4px 10px #bbb;
			width: 40px;
			height: 40px;
			margin: 0 auto;
		}
		.mui-pull-top-canvas canvas {
			width: 40px;
		}
		.mui-slider-indicator.mui-segmented-control {
			background-color: #efeff4;
		}
		.no-data {
			display: none;
			font-size: 14px;
			color: #666;
			margin-top: 30px;
			text-align: center;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">评价列表</h1>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	</header>
	<div class="mui-content">
		<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
			<a class="mui-control-item mui-active" href="#item1">全部</a>
			<a class="mui-control-item" href="#item2">好评</a>
			<a class="mui-control-item" href="#item3">中评</a>
			<a class="mui-control-item" href="#item4">差评</a>
		</div>
		<div class="dividing-line"></div>
		<div id="item1" class="mui-control-content mui-active">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="evaluate-ul">
						<!--<div class="evaluate-li">
							<div class="evaluate-user">
								<div class="user-score">
									<img class="user-head" src="../img/homePage/home-beijing.png" />
									<div class="name-score">
										<div class="name">一只小冯啊</div>
										<div class="score">5分</div>
									</div>
								</div>
								<div class="evaluate-time">2020-01-02</div>
							</div>
							<div class="evaluate-content">入园很顺利，不需要打印出来，直接打开邮件扫码就可以了，迪士尼海洋八点的梦幻秀也太棒了!很完美的体验。</div>
						</div>-->
						
					</div>
				</div>
			</div>
			<div class="no-data">暂无数据...</div>
		</div>
		<div id="item2" class="mui-control-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="evaluate-ul">
				
					</div>	
				</div>
			</div>		
			<div class="no-data">暂无数据...</div>
		</div>
		<div id="item3" class="mui-control-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="evaluate-ul">
				
					</div>	
				</div>
			</div>		
			<div class="no-data">暂无数据...</div>
		</div>
		<div id="item4" class="mui-control-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="evaluate-ul">
				
					</div>	
				</div>
			</div>		
			<div class="no-data">暂无数据...</div>
		</div>
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script src="../js/thirdparty/mui.pullToRefresh.js"></script>
	<script src="../js/thirdparty/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		mui.init();
		var objId = base.getParameter("objId");
		var evaluationType = base.getParameter("evaluationType");
		var ticketType = base.getParameter("ticketType");
		var pageData = [{pageNo: 1,refresh: 'down'},{pageNo: 1,refresh: 'down'},{pageNo: 1,refresh: 'down'},{pageNo: 1,refresh: 'down'}] 
		var self = null;
		var initPage = [2,1,1,1];
		(function($) {
			//阻尼系数
			var deceleration = mui.os.ios?0.003:0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration:deceleration
			});
			$.ready(function() {
				//循环初始化所有下拉刷新，上拉加载。
				$.each(document.querySelectorAll('.mui-control-content .mui-scroll'), function(index, pullRefreshEl) {
					$(pullRefreshEl).pullToRefresh({
						down: {
							callback: function() {
								self = this;
								pageData[evaluationType].refresh = 'down';
								pageData[evaluationType].pageNo = 1;
								getVisaEvaluationList();
							}
						},
						up: {
							callback: function() {
								self = this;
								pageData[evaluationType].refresh = 'up';
								pageData[evaluationType].pageNo ++;
								getVisaEvaluationList();
							}
						}
					});
				});
			});
		})(mui);
		$(function() {
			$("#segmentedControl").find(".mui-control-item").removeClass("mui-active");
			$(".mui-control-content").removeClass("mui-active");
			$("#segmentedControl").find(".mui-control-item").each(function(i) {
				if (i == evaluationType) {
					$(this).addClass("mui-active");
				}
			});
			$(".mui-control-content").each(function(i) {
				if (i == evaluationType) {
					$(this).addClass("mui-active");
				}
			});
			getVisaEvaluationList();
		});
		//点击tab切换
		$(".mui-control-item").on('tap', function() {
			var _evaluationType = 0;
			if ($(this).attr("href") == "#item1") {
				_evaluationType = 0;
			} else if ($(this).attr("href") == "#item2") {
				_evaluationType = 1;
			} else if ($(this).attr("href") == "#item3") {
				_evaluationType = 2;
			} else if ($(this).attr("href") == "#item4") {
				_evaluationType = 3;
			}
			if (_evaluationType == evaluationType) {
				return;
			}else {
				evaluationType = _evaluationType;
			}
			if (initPage[evaluationType] == 1) {
				self = null;
				initPage[evaluationType] = 2;
				getVisaEvaluationList();
			}
		});
		//获取评论列表
		function getVisaEvaluationList() {
			var data = {
				type: ticketType,
				objId: objId,
				evaluationType: evaluationType,
				pageNo: pageData[evaluationType].pageNo
			}
			base.postData(base.url.getVisaEvaluationList, data, function(data) {
				if (data.success) {
					var html = '';
					for (var i=0; i<data.extendData.evaluationList.length; i++) {
						html += pingEvaluationList(data.extendData.evaluationList[i]);
					}
					if (pageData[evaluationType].pageNo == 1 && data.extendData.evaluationList.length == 0) {
						$("#item"+(evaluationType+1)).find(".mui-scroll-wrapper").hide();
						$("#item"+(evaluationType+1)).find(".no-data").show();
					}
					$(".mui-control-content").each(function(i) {
						if (i == evaluationType) {
							if (pageData[evaluationType].refresh == 'down') {
								$(this).find(".evaluate-ul").html(html);
							}else{
								$(this).find(".evaluate-ul").append(html);
							}
						}
					});
					if (pageData[evaluationType].refresh == 'down') {
						if (self != null) {
							self.endPullDownToRefresh();	
							self.refresh(true);
						}
					}else {
						if (data.extendData.evaluationList.length < 20) {
							if (self != null) {
								self.endPullUpToRefresh(true);
							}
						}else {
							if (self != null) {
								self.endPullUpToRefresh();
							}
						}
					}
				} else {
					mui.toast(data.message);
				}
			});	
		}
		function pingEvaluationList(data) {
			var html = '<div class="evaluate-li">'+
						'	<div class="evaluate-user">'+
						'		<div class="user-score">'+
						'			<img class="user-head" src="'+data.headImg+'" />'+
						'			<div class="name-score">'+
						'				<div class="name">'+data.userName+'</div>'+
						'				<div class="score">'+data.stars+'分</div>'+
						'			</div>'+
						'		</div>'+
						'		<div class="evaluate-time">'+data.createTime+'</div>'+
						'	</div>'+
						'	<div class="evaluate-content">'+data.msg+'</div>'+
						'</div>';
			return html;		
		}
	</script>
</body>
</html>
